<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>登录demo</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 20px;">
    <form>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" value="admin" aria-describedby="emailHelp" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" value="abc123" placeholder="请输入密码">
        </div>
        <div class="form-row">
            <label for="validateCode" class="col-md-12">验证码</label>
            <input type="text" class="form-control col-md-6" id="validateCode" placeholder="请输入验证码">
            <img id="validateCodeArea" class="col-md-2">
        </div>
        <button id="submitBtn" type="button" class="btn btn-primary" style="margin-top: 20px;">登录</button>

    </form>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>

    var deviceId;

    $("#validateCodeArea").on('click', function () {
        getValidateCode();
    })

    var getValidateCode = function () {
        $.ajax({
            method: 'post',
            url: 'http://127.0.0.1:8080/uaa/auth/code/image',
            dataType: 'json'
        }).done(function (res) {
            if (res.code == 0) {
                var data = res.data;
                deviceId = data.deviceId;
                $("#validateCodeArea").attr('src', "data:image/jpg;base64," + data.image);
            } else {
                alert(res.msg)
            }

        }).fail(function (data,status,xhr) {
            alert("系统异常，请重试");
        })
    }

    $(function () {
        getValidateCode();

        $("#submitBtn").on('click', function () {
            $.ajax({
                method: 'post',
                url: 'http://127.0.0.1:8080/uaa/auth/form',
                data: {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    deviceId: deviceId,
                    imageCode: $("#validateCode").val()
                },
                dataType: 'json'
            }).done(function (res) {
                if (res.code == 0) {
                    alert("登录成功");
                    //TODO 缓存token
                    var data = res.data;
                    console.log(res);
                } else {
                    alert(res.msg);
                    //登录失败，刷新验证码
                    getValidateCode();
                }
            })
        });
    })

</script>
</body>
</html>